<template>
	<view>
		<uv-swiper radius='0' height='180' :list="list"></uv-swiper>
		<uv-sticky>
			<view class="title">
				<view class="left">
					<view class="roomName">
						{{roomName}}
					</view>
					<view class="floorName">
						{{floorName}}
					</view>
				</view>
				<view @click='selectOpen' class="right">
					<view class="">
						营业时间：{{begin}} - {{end}}
					</view>
					<view class="timess">
						选择时间:<sprn>{{parms.times}}</sprn>
						<!-- <uv-input placeholder="请选择预约时间" v-model="parms.times" border="none"></uv-input> -->
					</view>
				</view>
			</view>
		</uv-sticky>
		<uv-grid :col="5" :border="false">
			<uv-grid-item @click="itemBtn(item)" v-for="(item,index) in baseList" :key="index">
				<view v-if='!item.select' class="">
					<uv-icon :customStyle="{paddingTop:30+'rpx'}" name="coupon" :size="22"></uv-icon>
					<text class="grid-text">{{item.seatName}}</text>
				</view>
				<view v-else class="">
					<uv-icon :customStyle="customStyle" name="coupon" :size="22"></uv-icon>
					<text style="color: #6ECEB0;" class="grid-text">{{item.seatName}}</text>
				</view>
			</uv-grid-item>
		</uv-grid>
		<view @click="toConfirm" class="confirm">
			确定预约
		</view>
		<uv-datetime-picker maxHour='21'  ref="datetimePicker" v-model="parms.times" mode="time" @confirm="dateConfirm">
		</uv-datetime-picker>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import {
		getSeatListApi
	} from '../../api/index.js'
	const toast = ref()
	let today = new Date();
	let year = today.getFullYear();
	let month = today.getMonth() + 1;
	let day = today.getDate();
	const datetimePicker = ref()
	//轮播图数据
	const list = ref([])
	const roomName = ref('')
	const floorName = ref('')
	const customStyle = reactive({
		paddingTop: '30rpx',
		color: '#6ECEB0'
	})
	//开门时间
	const begin = ref('')
	//关门时间
	const end = ref('')
	//预约参数
	const parms = reactive({
		times: '',
		roomName: "",
		floorName: "",
		roomId: '',
		orderTime: '',
		seatId: '',
		seatName: '',
		createTime:'',
		beginTime:'',
		stuId: uni.getStorageSync("userId")
	})
	const selectOpen = () => {
		datetimePicker.value.open()
	}
	const current = computed(() => {
		return year + "年" + timeAdd0(month) + "月" + timeAdd0(day) + "日"
	})
	const baseList = ref([])
	const timeAdd0 = (str) => {
		if (str < 10) {
			str = '0' + str;
		}
		return str
	}
	//时间选择
	const dateConfirm = (e) => {
		console.log(e)
		//设置预约时间
		parms.orderTime = year + "-" + timeAdd0(month) + "-" + timeAdd0(day) + " " + e.value + ":00"
		//设置签退时间
		parms.createTime = year + "-" + timeAdd0(month) + "-" + timeAdd0(day) + " " +end.value
		//开始时间
		parms.beginTime = year + "-" + timeAdd0(month) + "-" + timeAdd0(day) + " " +begin.value
	}
	//获取座位列表
	const getSeatList = async (roomId) => {
		let res = await getSeatListApi({
			roomId: roomId
		})
		if (res && res.code == 200) {
			console.log(res)
			baseList.value = res.data;
		}
	}
	//跳转登录
	const toConfirm = () => {
		//判断是否选择座位
		if (!parms.seatId) {
			toast.value.show({
				type: 'default',
				title: '默认主题',
				message: "请选择座位！"
			})
			return;
		}
		//判断是否选择座位
		if (!parms.times) {
			toast.value.show({
				type: 'default',
				title: '默认主题',
				message: "请选择预约时间！"
			})
			return;
		}
		console.log(new Date(parms.orderTime) < new Date())
		if(new Date(parms.orderTime) < new Date()){
			toast.value.show({
				type: 'default',
				title: '默认主题',
				message: "预约时间不能小于当前时间！"
			})
			return;
		}
		uni.navigateTo({
			url: '../confirm/confirm?item=' + JSON.stringify(parms)
		})
	}
	//座位点击事件
	const itemBtn = (item) => {
		console.log(item)
		if (item.hasSelect == '1') {
			toast.value.show({

				type: 'default',
				title: '默认主题',
				message: "该座位已经被预约！"

			})
		} else {
			//取消所有选中的数据
			baseList.value.filter((dom) => {
				if (dom.select == true && dom.hasSelect == '0') {
					dom.select = false;
				}
			})
			item.select = !item.select;
			customStyle.color = '#6ECEB0'
			parms.seatId = item.seatId;
			parms.seatName = item.seatName;
			console.log(parms)
		}
	}
	onLoad((option) => {
		let item = JSON.parse(option.item)
		console.log(item)
		roomName.value = item.roomName
		floorName.value = item.floorName
		parms.floorName = item.floorName
		parms.roomName = item.roomName
		parms.roomId = item.roomId
		begin.value = item.beginTime
		end.value = item.endTime
		getSeatList(item.roomId)
		if (item.image) {
			//逗号分隔转数组
			let imgs = item.image.split(',')
			for (let i = 0; i < imgs.length; i++) {
				list.value.push(imgs[i])
			}
		}
		console.log(item)
	})
</script>

<style>
	page {
		background-color: #FFF;
	}
</style>
<style scoped lang="scss">
	.title {
		padding: 20rpx 30rpx;
		background-color: #f1f1f1;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.roomName {
			font-weight: 800;
		}

		.floorName {
			color: #999;
			font-size: 28rpx;
		}

		.right {
			width: 50%;
			display: flex;
			// align-items: center;
			flex-direction: column;

			.timess {
				display: flex;
			}
		}
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
	}

	.confirm {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #6ECEB0;
		height: 50px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFF;
	}
</style>
